<template>
  <div class="channel-edit">
    <!-- 我的频道 -->
    <van-cell class="title-text" title="我的频道" :border="false">
      <van-button
        class="edit-btn"
        size="mini"
        round
        type="danger"
        plain
        @click="isEdit = !isEdit"
        >编辑</van-button
      >
    </van-cell>

    <!-- 这里是渲染的全部的频道数组 -->
    <van-grid class="my-grid" :gutter="10">
      <van-grid-item
        class="grid-item"
        v-for="(channelItem, index) in userChannels"
        :key="index"
        :text="channelItem.name"
      >
        <van-icon
          slot="icon"
          name="clear"
          v-show="isEdit"
          @click="delMy(channelItem.id, index)"
        >
        </van-icon>
        <!-- <span class="text" :class="{active: active === index}" slot="text">{{ channelItem.name }}</span> -->
      </van-grid-item>
    </van-grid>

    <!-- 频道推荐 -->
    <van-cell class="title-text" title="频道推荐" :border="false"></van-cell>
    <van-grid class="recommend-grid" :gutter="10">
      <van-grid-item
      @click="addChannel(value)"
        class="grid-item"
        v-for="value in recommentChannels"
        :key="value.id"
        :text="'+  '+value.name"
      />
    </van-grid>
  </div>
</template>

<script>
import {
  getAllChannels,
  addUserChannel,
  deleteChannelAjax
} from "@/api/channel";
import { mapState } from 'vuex'
import { setItem } from '@/utils/storage' //存数据
import { log } from 'util'

export default {
  name: "ChannelEdit",
  // 父组件向子组件传进来的值频道列表
  props: {
    userChannels: {
      type: Array,
      required: true
    },
    active: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      // x 号 默认 不显示
      isEdit: false,
      // 所有的频道列表数组
      allChannels: []
    };
  },
  created() {
    // 获取频道列表
    this.loadAllChannels()
    // console.log(this.user)
  },
  methods: {
    // 获取频道列表
    loadAllChannels() {
      getAllChannels()
        .then((res) => {
          // console.log('这里是请求成功：', res)
          this.allChannels = res.data.data.channels
        })
        .catch(() => {
          this.$toast('获取频道接口失败')
        })
    },
    // 点击删除频道
    delMy(id, index) {
      // console.log(id, index);
      // 删除的就不是激活那一项 直接删除
      this.userChannels.splice(index, 1);
      // 删除逻辑
      this.deleteChannelqqq(id);
    },

    // 删除频道的函数
    async deleteChannelqqq(id) {
      // 函数定义的位置 叫形参，可以任意的起名称
      // 已登录  未登录
      // console.log(id)
      try {
        if (this.user) {
          // console.log(this.user)
          await deleteChannelAjax(id)
          this.$toast('删除成功777!!!')
        } else {
          // 未登录
          setItem('TOUTIAO_CHANNELS', this.userChannels)
        }
      } catch (err) {
        this.$toast('获取失败')
      }
    },

    // 点击频道推荐 把对应那一项 传过来 push 到 我的频道
    async addChannel(abc) {
      this.userChannels.push(abc)
      // 对数据进行持久化处理 登不登录都 可以显示状态栏
      if (this.user) {
        // 发请求，储存在服务器里面
        // 这里只是通过简单的 本地存储有没有来判断； 工作里面会有一个请求，专门来校验你的token过期没有
        try {
          await addUserChannel([{ id: abc.id, seq: this.userChannels.length }])
        } catch (err) {
          this.$toast('添加频道失败')
        }
      } else {
        // 储存在本地
        setItem('TOUTIAO_CHANNELS', this.userChannels)
      }
    },
    
  },
  computed: {
    // 这个辅助函数 就是映射我们的vuex里面的数据，到当前组件的this上面
    ...mapState(['user']),

    // 显示频道推荐 ===  所有频道列表allChannels  -  我的频道userChannels
    // 代码来说，就是两个数组的找不同
    recommentChannels() {
      return this.allChannels.filter(item => {
        return !this.userChannels.find(childItem => {
          return item.id == childItem.id;
        });
      });
    }
  }
};
</script>

<style scoped lang="less">
.channel-edit {
  padding: 85px 0;
  .title-text {
    font-size: 32px;
    color: #333;
  }

  .edit-btn {
    width: 104px;
    height: 48px;
    font-style: 26px;
    color: #f85959;
    border: 1px solid #f85959;
  }

  /deep/.grid-item {
    width: 160px;
    height: 86px;
    .van-grid-item__content {
      white-space: nowrap;
      background-color: #f4f5f6;
      .van-grid-item__text {
        font-style: 28px;
        color: #222;
      }
    }
  }

  /deep/ .my-grid {
    .grid-item {
      .van-icon-clear {
        position: absolute;
        right: -80px;
        top: -30px;
        font-size: 40px;
        color: #cacaca;
        z-index: 2;
      }
    }
  }

  /deep/.recommend-grid {
    .grid-item {
      .van-grid-item__content {
        flex-direction: row;
        .van-icon {
          font-size: 28px;
          margin-right: 6px;
        }
        .van-grid-item__text {
          margin-top: 0;
        }
      }
    }
  }
  /deep/ .van-grid-item__content {
    background-color: #f5f5f6;
    .van-grid-item__text,
    .text {
      color: #222;
      font-size: 28px;
      white-space: nowrap;
    }

    .active {
      color: red;
    }
  }
}
</style>
